import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "umi";
import "./Style/AddAvailability/AddAvailability.css";
//定义的tab切换数据的类型
interface Tab {
  label: string;
}
const AddAvailability = () => {
  const navgate = useNavigate();
  //tab切换数据
  const TABS: Tab[] = [{ label: "房源信息" }, { label: "SEO信息" }];
  //tab切换
  const [activeTab, setActiveTab] = useState<number>(0);
  //tab切换点击
  function handleClick(index: number) {
    setActiveTab(index);
  }
  //绑定input赋值
  const [Communityinp, setCommunityinp] = useState("");
  const [Property, setProperty] = useState("");
  const [area, setarea] = useState("");
  const [Totalprice, setTotalprice] = useState("");
  function Community(e: any) {
    setCommunityinp(e.target.value);
  }
  function Propertyy(e: any) {
    setProperty(e.target.value);
  }
  function areac(e: any) {
    setarea(e.target.value);
  }
  function Totalpricea(e: any) {
    setTotalprice(e.target.value);
  }
  //上传仓库数据
  function update() {
    let obj = {
      checked: false,
      checkedtwo: true,
      id: Math.random()
        .toString()
        .slice(2, 32 + 2),
      mj: area,
      paixu: Math.floor(Math.random() * 1000),
      title: Property,
      xiaoqu: Communityinp,
      zj: Totalprice,
    };
    dispatch({
      type: "updateobj",
      payload: obj,
    });
    navgate("/DxlPages/Availability");
  }
  //仓库三步走
  const dispatch = useDispatch();
  const store = useSelector((state: any) => state.reducer);
  useEffect(() => {}, []);

  return (
    <div className="AddAvailabilitybox">
      <div className="AddAvailabilityHeader">
        <div className="AddAvailabilityHeaderOne">
          {TABS.map((tab, index) => (
            <li
              key={index}
              onClick={() => handleClick(index)}
              className={index === activeTab ? "AddAvailabilityactive" : ""}
            >
              {tab.label}
            </li>
          ))}
        </div>
      </div>
      {/* tab切换 内容  房源信息*/}
      <div
        className="AddAvailabilitytab"
        style={{ display: activeTab == 0 ? "block" : "" }}
      >
        {/* 房源信息 */}
        <div className="AddAvailabilityMain">
          <div className="AddAvailabilityMainOne">
            <div>所属小区</div>
            <div>
              <input type="text" placeholder="选择小区" onChange={Community} />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainOne">
          <div className="AddAvailabilityMainTow">
            <div>房源名称</div>
            <div>
              <input type="text" placeholder="房源名称" onChange={Propertyy} />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainTow">
          <div className="AddAvailabilityMainThird">
            <div>面积</div>
            <div>
              <input type="text" placeholder="122" onChange={areac} />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainThird">
          <div className="AddAvailabilityMainFour">
            <div>总价</div>
            <div>
              <input type="text" placeholder="122" onChange={Totalpricea} />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainThirdA">
          <button onClick={update}>提交</button>
        </div>
      </div>
      {/* tab切换 内容  seo信息*/}
      <div
        className="AddAvailabilitytab"
        style={{ display: activeTab == 1 ? "block" : "" }}
      >
        {/* seo信息 */}
        <div className="AddAvailabilitytabOne">
          <div className="AddAvailabilitytabOneA">
            <div>seo标题</div>
            <div>
              <input type="text" placeholder="seo标题" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabTow">
          <div className="AddAvailabilitytabTowA">
            <div>seo关键词</div>
            <div>
              <input type="text" placeholder="seo关键词" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabThird">
          <div className="AddAvailabilitytabThirdA">
            <div>seo描述</div>
            <div>
              <textarea></textarea>
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabFour">
          <button>提交</button>
        </div>
      </div>
    </div>
  );
};

export default AddAvailability;
